<template>
	<view class="yb-scroll-x yb-flex" :id="customIdSync" :class="customClassSync" :style="customStyleSync">
		<scroll-view
		:show-scrollbar="showScrollbar"
		:scroll-into-view="scrollIntoView"
		:scroll-left="scrollLeft"
		:scroll-with-animation="scrollWithAnimation"
		:scroll-x="true"
		class="yb-scroll-x-scroller yb-flex yb-flex-1">
		<!-- #ifdef MP-WEIXIN -->
		<view class="yb-flex yb-row yb-flex-1" style="overflow: visible;">
		<!-- #endif -->
			<slot></slot>
		<!-- #ifdef MP-WEIXIN -->
		</view>
		<!-- #endif -->
		</scroll-view>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			showScrollbar: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				scrollIntoView: '',
				scrollWithAnimation: false,
				scrollLeft: -1
			}
		},
		methods: {
			scrollToElement (element, animate = false) {
				this.scrollIntoView = ''
				this.scrollWithAnimation = animate
				this.$nextTick(function () {
					this.scrollIntoView = element
				})
			},
			scrollTo (offset, animate = false) {
				this.scrollLeft = -1
				this.scrollWithAnimation = animate
				this.$nextTick(function () {
					this.scrollLeft = offset
				})
			}
		}
	}
</script>

<style scoped>
	/* #ifdef APP-NVUE */
	.yb-scroll-x-scroller {
		flex-direction: row;
		flex-wrap: nowrap;
	}
	/* #endif */
	/* #ifndef APP-NVUE || MP-WEIXIN */
	/deep/ .yb-scroll-x-scroller .uni-scroll-view-content {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	/* #endif */
</style>